<template>
    <div>
        <el-card>
            <el-form :model="merchantForm" :rules="rules" status-icon  ref="merchantForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="材料名称" prop="username"  >
                    <el-input v-model="merchantForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="材料描述" prop="username"  >
                    <el-input v-model="merchantForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="材料上传" prop="password" >
                    <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change="handleChange"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('merchantForm')">立即创建</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { createOrUpdateMerchantInfo } from '@/api/groupManagementApi/shopNews'
export default {
  data () {
    const validatorPhone = (rule, value, callback) => {
      const reg = /^1[0-9]{10}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不正确，请您重新输入'))
      }
    }

    const validateRePassWord = (rule, value, callback) => {
      if (this.merchantForm.password !== this.merchantForm.checkpassword) {
        callback(new Error('两次密码不同请重新输入'))
      } else {
        callback()
      }
    }

    return {
      merchantForm: {
        username: '', // 账户名
        password: '', // 密码
        checkpassword: '',
        storeName: '', // 商家店名
        storeAddress: '', // 商家地址
        phone: '', // 商家联系电话
        tUserId: null // 商家用户ID
      },
      rules: {
        // username: [
        //   { required: true, message: '请输入用户名', trigger: 'blur' }
        // ],
        // password: [
        //   { required: true, message: '请输入密码', trigger: 'blur' }
        // ],
        // checkpassword: [
        //   { required: true, trigger: 'blur', validator: validateRePassWord }
        // ],
        // storeName: [
        //   { required: true, message: '请输入商户名', trigger: 'blur' }
        // ],
        // storeAddress: [
        //   { required: true, message: '请输入商户地址', trigger: 'blur' }
        // ],
        // phone: [{ required: true, trigger: 'blur', validator: validatorPhone }]
      },
      title: '',
      token: '',
      disabledUsername: true,
      fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    init (type) {
      console.log(type)
      this.dialogVisible = true
      if (type !== null) {
        this.merchantForm.tUserId = type.user.tuserId
        this.merchantForm.username = type.user.username
        this.merchantForm.password = type.user.password
        this.merchantForm.checkpassword = type.user.password
        this.merchantForm.storeName = type.storeName
        this.merchantForm.storeAddress = type.storeAddress
        this.merchantForm.phone = type.phone
        this.title = '编辑'
        this.disabledUsername = false
      } else {
        this.title = '新建'
        this.disabledUsername = true
        this.resetField()
        this.merchantForm.tUserId = null
      }
      this.token = window.sessionStorage.getItem('token')
    },
    submitForm (merchantForm) {
        this.$router.push('/shopNews')
    //   this.$refs[merchantForm].validate(async valid => {
    //     if (valid) {
    //       createOrUpdateMerchantInfo(this.merchantForm).then(res => {
    //         console.log(res)
    //         if (res.state === 200) {
    //             this.$router.push('/shopNews')
    //           this.$emit('closeHandler')
    //         } else if (res.state === 408) {
    //           this.$message.error(res.message)
    //           window.sessionStorage.clear()
    //           this.$router.push('/login')
    //         } else {
    //           this.$message.error(res.message)
    //         }
    //       })
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    },
    cancel() {
        this.$router.push('/shopNews')
    },
    resetField () {
      this.merchantForm = {
        username: '', // 账户名
        password: '', // 密码
        checkpassword: '',
        storeName: '', // 商家店名
        storeAddress: '', // 商家地址
        phone: '', // 商家联系电话
        tUserId: null // 商家用户ID
      }
    },
    handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      }
  }
}
</script>

  <style lang="scss" scoped>

  </style>
